import { useCallback, useEffect, useRef } from "react";
import * as echarts from "echarts";
interface Props{
    options:Record<string,unknown>
    theme?:string
}
export default function XuEharts(props: Props) {
  const chartRef = useRef<HTMLDivElement|null>(null);
  const createChart = useCallback(()=>{
      const myChart = echarts.init(chartRef.current);
      myChart.setOption(props.options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
  },[props.options])

  useEffect(() => {
    createChart();
  }, [createChart]);
  return (
    <>
      <div style={{ width: "100%", height: "100%" }} ref={chartRef}></div>
    </>
  );
}
